<template>
	<div class="container">
	  <div class="header">
		<router-link to="">
		  <i class="iconfont icon-back" @click="$router.back()"></i>
		</router-link>
		<input type="text" placeholder="请输入搜索的关键字..." ref="input" />
		<button @click="search.name = $refs.input.value.trim()"><i class="iconfont icon-search"></i></button>
	  </div>
	  <div class="order">
		<div class="order-item" :class="{ active: search.orderCol === 'price' }" @click="changeOrder('price')">
		  <span>价格</span>
		  <i class="iconfont icon-asc" v-show="search.orderDir === 'asc'"></i>
		  <i class="iconfont icon-desc" v-show="search.orderDir === 'desc'"></i>
		</div>
		<div class="order-item" :class="{ active: search.orderCol === 'sale' }" @click="changeOrder('sale')">
		  <span>销量</span>
		  <i class="iconfont icon-asc" v-show="search.orderDir === 'asc'"></i>
		  <i class="iconfont icon-desc" v-show="search.orderDir === 'desc'"></i>
		</div>
		<div class="order-item" :class="{ active: search.orderCol === 'rate' }" @click="changeOrder('rate')">
		  <span>评价</span>
		  <i class="iconfont icon-asc" v-show="search.orderDir === 'asc'"></i>
		  <i class="iconfont icon-desc" v-show="search.orderDir === 'desc'"></i>
		</div>
	  </div>
	  <div class="content">
		<ul ref="list">
		  <li v-for="item in list" :key="item.id">
		   <div class="a">
			<img :src="item.avatar" class="content-img" alt="" @click="detail(item.id)">
			  <div>
				<p class="name">{{ item.name }}</p>
				<p class="brief">{{ item.brief }}</p>
				<p class="price">￥{{ item.price }}.00起</p>
				<p class="sale">月销：{{ item.sale }}件 好评：{{ item.rate }}条</p>
			  </div>
		   </div>
			  
			
		  </li>
		</ul>
		<p class="tip" ref="tip" v-text="tip"></p>
	  </div>
	</div>
  </template>
  <script>
  import imagesloaded from "imagesloaded";
  import { ProductApi } from "@/api";
  
  
  export default {
	name: "List",
	data() {
	  return {
		search: {
		  name: "",
		  cid: parseInt(this.$route.params.params),
		  orderCol: "price",
		  orderDir: "asc",
		  begin: 0,
		  pageSize: 6
		},
		list: [],
		hasMore: true,
		isLoading: false,
	  };
	},
	methods: {
	  async getData(isLoadMore) {
		try {
		  this.isLoading = true;
		  const result = await ProductApi.getList(isLoadMore ? Object.assign({}, this.search, { begin: this.list.length }) : this.search)
		  await new Promise(resolve => setTimeout(() => resolve(result), 1000));
		  this.hasMore = result.length === this.search.pageSize;
		  this.list = isLoadMore ? this.list.concat(result) : result;
		  this.isLoading = false;
		} catch (e) {/**/ }
  
	  },
	  detail(id) {
		const cid = id;
		this.$router.push({ path: `/Detail/${cid}` });
	  },
	  changeOrder(col) {
		if (col === this.search.orderCol)
		  this.search.orderDir = this.search.orderDir === "asc" ? "desc" : "asc";
		else
		  this.search.orderCol = col;
		this.getData();
	  }
	},
	computed: {
	  tip() {
		if (this.isLoading)
		  return "加载中..";
		else if (this.list.length === 0)
		  return "暂无相关商品，敬请期待";
		else if (this.hasMore)
		  return "上拉加载更多";
		else
		  return "已到达底部"
	  }
	},
  
	watch: {
	  search: {
		handler() {
		  if (this.io) this.io.unobserve(this.$refs.tip);
		  this.list = [];
		  this.getData(false);
		},
		immediate: true,
		deep: true,
	  },
	  list: function (newValue) {
		if (newValue.length === 0) return;
		if (!this.hasMore) return;
		this.$nextTick(function () {
		  imagesloaded(this.$refs.list, () => {
			this.io.observe(this.$refs.tip);
		  });
		});
	  }
	},
	mounted() {
	  this.io = new IntersectionObserver(
		arr => {
		  if (arr[0].isIntersecting) {
			this.io.unobserve(this.$refs.tip);
			this.getData(true);
		  }
		},
		{ root: null, threshold: [0.9] }
	  );
  
	},
	destroyed() {
	  this.io.disconnect();
	}
  
  }
  </script>
  <style scoped>
  .container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
  }
  
  .container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f4f4f4;
  }
  
  .header {
	flex-shrink: 0;
	height: 45px;
	display: flex;
	align-items: center;
  }
  
  
  .header a,
  .header button {
	width: 45px;
	text-align: center;
	line-height: 45px;
	font-size: 18px;
	border: none;
	background-color: transparent;
  }
  
  .header input {
	height: 30px;
	align-self: center;
	flex-grow: 1;
	margin: 0 10px;
	border-radius: 15px;
	outline: none;
	text-indent: 1em;
	border: 1px solid #b0b0b0;
	font-size: 14px;
  }
  
  .order {
	flex-shrink: 0;
	height: 40px;
	display: flex;
	justify-content: space-evenly;
  }
  
  .order-item {
	display: flex;
	align-items: center;
  }
  
  .order-item.active {
	color: red;
  }
  
  .order-item span {
	font-size: 14px
  }
  
  .order-item i {
	font-size: 18px;
  }
  
  .content {
	flex-grow: 1;
	border-top: 1px solid #b0b0b0;
	overflow: auto;
  }
  
  .content ul li .a {
	display: flex;
	flex-direction: row;
	align-items: center;
  }
  
  .content-img {
	width: 126px;
	height: 126px;
  }
  
  .name {
	font-size: 14px;
	color: black;
	
  }
  
  .brief {
	width:276px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	text-overflow: ellipsis;
  overflow: hidden;
  }
  
  .price {
	font-size: 16px;
	color: red;
  }
  
  .sale {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
  }
  
  p.tip {
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  </style>